<template>
  <div>
    <div class="commodityBox" v-if="commodity">
      <div class="inlineBlock">
        <img :src="commodity.pthumbnail" />
      </div>
      <div class="inlineBlock" style="width: 480px;">
        <div>
          <p>{{ commodity.gname }}</p>
        </div>
        <div style="margin-top: 40px;">
          <span class="oldPrice"
            ><span class="inlineBlock font" style="width: 80px;">原价</span>{{ commodity.gprice }}</span
          >
          <br />
          <span class="newPrice"
            ><span class="inlineBlock" style="width: 80px; margin-top: 10px;">优惠价</span>{{ commodity.gprice }}</span
          >
        </div>
        <div style="margin-top: 80px;">
          <span class="inlineBlock font" style="width: 80px;">数量</span>
          <el-input-number v-model="count" size="small" :min="1"></el-input-number>
        </div>
        <div class="addButton">
          <a href="javascript:void(0);" @click="addShopingCar">
            <span><i class="el-icon-shopping-cart-2"></i> 加入购物车</span>
          </a>
        </div>
      </div>
    </div>
    <div class="commentBox" v-if="commodity">
      <div class="commentCount font">
        <a class="a_label" href="#"> <i class="el-icon-s-goods"></i> {{ commodity.name }} </a>
      </div>
    </div>
    <!-- 评论 -->
    <div class="commentBox">
      <h4>累计评论({{ comments.length }})</h4>
      <el-row>
        <el-col :span="18">
          <div class="grid-content bg-purple-dark">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">
            <el-button type="primary" @click="publish">评论</el-button>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <div v-for="(item, index) in comments" :key="index">
        <div class="imageDiv">
          <!-- <img :src="item.picUrl" style="height: 50px;border-radius: 50%" /> -->
          <el-avatar :src="item.picUrl"></el-avatar>
          <span class="font pic" style="font-size: 20px; color: #3F3F3F;">{{ item.nickName }}</span>
        </div>
        <div>
          <p class="font" style="text-indent: 2em; font-size: 18px; color: #3F3F3F;">{{ item.content }}</p>
        </div>
        <div>
          <p class="font" style="text-indent: 2em; font-size: 16px; color: #666;">{{ item.time }}</p>
        </div>
        <el-divider></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
import { goodsById, goodsCommentsList, publishComments } from '@/api/goods.js'
export default {
  data() {
    return {
      input: '',
      commodity: {},
      comments: [],
      count: 1,
      dialogVisible: false,
      pic: 'www.baidu.com'
    }
  },
  created() {
    // 获取商品评论
    this.getCommentsList()
    this.getGoodsById()
  },
  computed: {
    userInFo: function() {
      return this.$store.state.user.profile
    }
  },
  methods: {
    // 获取商品评论
    async getCommentsList() {
      const res = await goodsCommentsList({
        id: this.$route.query.commodityId
      })
      this.comments = res.data.data
    },
    // 发布评论
    async publish() {
      const userInFo = this.$store.state.user.profile
      const res = await publishComments({
        id: this.$route.query.commodityId,
        userId: userInFo.userId,
        name: userInFo.username,
        pic: userInFo.picUrl,
        content: this.input,
        time: this.getNowTime()
      })
      if (res.data.code == '000') {
        this.$message({ message: '评论成功', type: 'success' })
        this.getCommentsList()
      } else {
        this.$message({ message: '服务器错误', type: 'warning' })
      }
    },
    //商品信息
    async getGoodsById() {
      const res = await goodsById({
        id: this.$route.query.commodityId,
        uid:this.$store.state.user.profile.userId
      })
      console.log(res);
      this.commodity = res.data.data
      if (!this.commodity) {
        this.$message({ message: '服务器错误', type: 'warning' })
      }
    },
    // 生成时间
    getNowTime() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    },
    // 加入购物车
    addShopingCar() {
      const userInFo = this.$store.state.user.profile
      this.$store.dispatch('cart/asyncInsertCart', {
        goodsId: this.$route.query.commodityId,
        num: this.count,
        userId: userInFo.userId,
        sumprice: this.commodity.gprice * this.count
      })
    }
  }
}
</script>

<style scoped lang="less">
.inlineBlock {
  display: inline-block;
}

.commodityBox {
  width: 1000px;
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 0 auto;
  margin-bottom: 20px;
}

.commodityBox img {
  width: 300px;
  height: 300px;
  object-fit: contain;
  vertical-align: text-bottom;
  margin-right: 20px;
}

.commodityBox p {
  font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 21px;
  color: #3c3c3c;
  margin-top: 0;
}

.newPrice {
  font-size: 22px;
  color: #f40;
}

.oldPrice {
  text-decoration: line-through;
}

.addButton {
  width: 180px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  text-align: center;
  margin-left: 250px;
  margin-top: 30px;
}

.addButton a {
  display: inline-block;
  width: 180px;
  height: 40px;
  text-decoration: none;
  background-color: #f40;
  color: white;
  cursor: pointer;
}

.font {
  color: #6c6c6c;
  font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}
.pic {
  margin-left: 20px;
  font-weight: 700;
}

.commentBox {
  width: 1000px;
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 0 auto;
  padding-top: 10px;
}

.commentCount {
  height: 40px;
  line-height: 40px;
  color: #f40;
  font-size: 16px;
  margin-bottom: -20px;
  .a_label {
    text-decoration: none;
    color: inherit;
  }
}
.imageDiv{
  height: 50px;
}
</style>
